import React,{ Component } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import Icon from "react-native-vector-icons/EvilIcons";

class SortBtn extends Component{
    constructor(props){
        super(props);
        this.state = {
            sort: '',
            arrow: 'chevron-down',
        };
        this.pressSort = this.pressSort.bind(this);
    }
    
    pressSort(){
        const sort = this.state.sort!=='asc'?'asc':'desc';
        this.setState({
            sort,
            arrow: sort==='asc'?'chevron-up':'chevron-down'
        });
        this.props.sortFun(sort);
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.pressSort}>
                <View style={styles.sortSection}>
                    <Text style={styles.sortBtn}>价格排序</Text>
                    {this.state.sort!=='' && <Icon style={styles.icon} name={this.state.arrow} size={28}/>}
                </View>
            </TouchableWithoutFeedback>
        );
    }
}
const styles = StyleSheet.create({
    sortSection: {
        display: "flex",
        flexDirection:"row",
        alignItems: "center",
        marginTop: 30,
        marginBottom: 25,
        width: 150,
        borderWidth: 1,
        borderColor: "#ccc",
        borderStyle: "solid",
        borderRadius: 5,
        position:"relative"
    },
    sortBtn: {
        paddingLeft: 30,
        paddingRight: 35,
        paddingTop: 15,
        paddingBottom: 15,
        fontSize: 18, 
    },
    icon:{
        position: "absolute",
        right: 15
    }
})

export default SortBtn;